<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
        <q-toolbar-title> 陈一非 作业 </q-toolbar-title>

        <div>Quasar v{{ $q.version }}</div>
      </q-toolbar>
    </q-header>

    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
      <q-list>
        <q-item-label header> 作业列表 </q-item-label>

        <!-- 第一章 - 使用更适合章节的图标 -->
        <q-expansion-item group="Chapter" dense icon="library_books" label="第一章" class="text-h6">
          <q-card class="bg-grey-1 bordered shadow-md" style="margin: 10px;">
            <!-- 第一天-->
            <q-expansion-item dense icon="event" label="第一天" class="text-subtitle1">
              <q-card class="bg-grey-1 bordered shadow-md" style="margin: 10px;">
                <q-list dense class="text-subtitle2">
                  <EssentialLink title="作业一" caption="MyTask01" icon="school" link="/" />
                  <EssentialLink title="作业二" caption="MyTask02" icon="school" link="/class_day01/MyTask02" />
                </q-list>
              </q-card>
            </q-expansion-item>

            <!-- 第二天-->
            <q-expansion-item dense icon="event" label="第二天" class="text-subtitle1">
              <q-card class="bg-grey-1 bordered shadow-md" style="margin: 10px;">
                <q-list dense class="text-subtitle2">
                  <EssentialLink title="作业三" caption="MyTask03" icon="school" link="/class_day02/MyTask03" />
                  <EssentialLink title="作业四" caption="MyTask04" icon="school" link="/class_day02/MyTask04" />
                </q-list>
              </q-card>
            </q-expansion-item>

            <!-- 第三天-->
            <q-expansion-item dense icon="event" label="第三天" class="text-subtitle1">
              <q-card class="bg-grey-1 bordered shadow-md" style="margin: 10px;">
                <q-list dense class="text-subtitle2">
                  <EssentialLink title="作业五" caption="MyTask05" icon="school" link="/class_day03/MyTask05" />
                  <EssentialLink title="作业六" caption="MyTask06" icon="school" link="/class_day03/MyTask06" />
                </q-list>
              </q-card>
            </q-expansion-item>

            <!-- 第四天-->
            <q-expansion-item dense icon="event" label="第四天" class="text-subtitle1">
              <q-card class="bg-grey-1 bordered shadow-md" style="margin: 10px;">
                <q-list dense class="text-subtitle2">
                  <EssentialLink title="作业七" caption="MyTask07" icon="school" link="/class_day04/MyTask07" />
                  <EssentialLink title="作业八" caption="MyTask08" icon="school" link="/class_day04/MyTask08" />
                  <EssentialLink title="作业九" caption="MyTask09" icon="school" link="/class_day04/MyTask09" />
                  <EssentialLink title="作业十" caption="MyTask10" icon="school" link="/class_day04/MyTask10" />
                  <EssentialLink title="作业十一" caption="MyTask11" icon="school" link="/class_day04/MyTask11" />
                </q-list>
              </q-card>
            </q-expansion-item>
            <!-- 第五天-->
            <q-expansion-item dense icon="event" label="第五天" class="text-subtitle1">
              <q-card class="bg-grey-1 bordered shadow-md" style="margin: 10px;">
                <q-list dense class="text-subtitle2">
                  <EssentialLink title="作业十二" caption="MyTask12" icon="school" link="/class_day05/MyTask12" />
                  <EssentialLink title="作业十四" caption="MyTask14" icon="school" link="/class_day05/MyTask14" />
                  <EssentialLink title="作业十五" caption="MyTask15" icon="school" link="/class_day05/MyTask15" />
                </q-list>
              </q-card>
            </q-expansion-item>
          </q-card>
        </q-expansion-item>

        <!-- 实验大作业-->
        <q-expansion-item group="Experiment" dense icon="library_books" label="实验大作业" class="text-h6">
          <q-card class="bg-grey-1 bordered shadow-md" style="margin: 10px;">
            <q-list dense class="text-subtitle2">
              <EssentialLink title="实验一" icon="school" link="/exp_01/MyExp01" />
            </q-list>
          </q-card>
        </q-expansion-item>
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref } from 'vue'
import EssentialLink from 'components/EssentialLink.vue'

const leftDrawerOpen = ref(false)

function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value
}
</script>

<style scoped>
</style>
